<template>
  <div>
    <Main type="form">
      <Title :title="title"></Title>
      <el-row style="padding: 0 10px;">
        <el-col :span="8">
          <div style=" text-align: left; font-size: 14px; margin: 11px 0;">
            手机浏览
          </div>
          <div class="moblieBoxs">
            <img src="http://oss.ztwlxx.cn/shopHTphoneheader.png" />

            <video
              ref="videosM"
              width="100%"
              height="600px"
              controls="controls"
              controlsList="nodownload"
              :poster="vposter"
              :src="vsrc"
            ></video>
          </div>
        </el-col>
        <el-col :span="16">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="150px"
            class="demos-forms"
          >
            <el-form-item label="视频名称" prop="title">
              <el-input
                v-model="form.title"
                class="form-input"
                placeholder="请输入视频名称"
              ></el-input>
            </el-form-item>

            <el-form-item label="视频封面" prop="cover">
              <div class="commodityImage clearfix">
                <div v-if="form.cover" class="icon">
                  <img
                    :src="
                      $store.state.qiniu + form.cover + $store.state.imgRotate
                    "
                  />
                </div>
                <el-button
                  type="primary"
                  @click="
                    showImages = true;
                    useType = 'img';
                  "
                  >选择图片</el-button
                >
              </div>
            </el-form-item>
            <el-form-item label="观看权限" prop="type">
              <el-radio
                v-model="form.type"
                label="0"
                border
                size="medium"
                @change="rchange"
                >免费</el-radio
              >
              <el-radio
                v-model="form.type"
                label="1"
                border
                size="medium"
                @change="rchange"
                >会员免费</el-radio
              >
            </el-form-item>
            <el-form-item
              v-if="form.type == 1"
              label="会员卡类型"
              prop="card_id"
            >
              <el-select v-model="form.card_id" placeholder="请选择会员卡名称">
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.title"
                  :value="item.card_id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上传视频" prop="videoSrc">
              <div class="commodityImage clearfix">
                <div>
                  {{ form.videoSrc }}
                </div>
                <el-button
                  type="primary"
                  @click="
                    showImages = true;
                    useType = 'video';
                  "
                  >选择视频</el-button
                >
              </div>
            </el-form-item>
            <el-form-item label="是否开启循环播放" prop="cycle">
              <el-switch
                v-model="form.cycle"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="相关商品" prop="type_shop">
              <shop-new :data-arr="DataArr" @close="close" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <Footer>
        <div>
          <el-button plain @click="$emit('out')">取 消</el-button>
          <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
      </Footer>

      <images
        :dialog-images="showImages"
        :use-btn="true"
        :use-type="useType"
        @close="closeImages"
      />
    </Main>
  </div>
</template>
<script>
import { VIPCARDLIST } from "@/service/shop";
import { ADD_VIDEP, VIDEO_DATA } from "../service";

export default {
  components: {
    shopNew: () => import("publicCom/shopNew"),
    images: r =>
      require.ensure([], () => r(require("publicCom/imgupdate")), "imgupdate")
  },
  // eslint-disable-next-line vue/require-prop-types
  props: {
    videoId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      title: "新建视频",
      showImages: false,
      useType: "",
      options: [],
      form: {
        title: "",
        cover: "",
        videoSrc: "",
        type: "0",
        card_id: "",
        cycle: false
      },
      vposter: "",
      vsrc: "",
      rules: {
        title: [{ required: true, message: "请输入视频名称", trigger: "blur" }],
        cover: [{ required: true, message: "请选择视频封面", trigger: "blur" }],
        card_id: [{ required: true, message: "请选择会员卡", trigger: "blur" }],
        type: [{ required: true, message: "", trigger: "blur" }],
        cycle: [{ required: true, message: "", trigger: "blur" }],
        videoSrc: [{ required: true, message: "请选择视频", trigger: "blur" }]
      },
      dialogVisible: false,
      dataJson: {},
      DataArr: []
    };
  },
  created() {
    this.getVipList();
    if (this.videoId) {
      this.title = "编辑视频";
      this.getVDATA();
    }
  },

  methods: {
    close(e) {
      if (e) {
        this.DataArr = e;
      }
    },
    closeImages(file) {
      this.showImages = false;
      if (!file) return;
      if (this.useType === "img") {
        this.form.cover = file.file_path;
        this.vposter = this.$store.state.qiniu + file.file_path;
      } else {
        this.vsrc = this.$store.state.qiniu + file.file_path;
        this.form.videoSrc = file.file_path;
      }
    },
    rchange() {
      this.form.card_id = "";
    },
    async submitForm() {
      let commodity = [];
      if (this.form.type_shop !== 0) {
        this.DataArr.forEach(ele => {
          commodity.push(ele.goods_id);
        });
        commodity = commodity.join(",");
      }

      let prams = {
        title: this.form.title,
        cover: this.form.cover,
        video: this.form.videoSrc,
        commodity,
        card_id: this.form.type === "1" ? this.form.card_id : 0,
        cycle: this.form.cycle ? 1 : 2,
        video_id: this.videoId
      };
      await this.$refs["form"].validate(valid => {
        if (valid) {
          ADD_VIDEP(prams).then(({ code, msg }) => {
            if (code === 200) {
              this.$emit("out");
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        } else {
          return false;
        }
      });
    },
    async getVipList() {
      await VIPCARDLIST({ page: 1, pageshow: 100 }).then(({ code, data }) => {
        if (code === 200) {
          this.options = data;
        }
      });
    },
    async getVDATA() {
      await VIDEO_DATA({ video_id: this.videoId }).then(({ code, data }) => {
        if (code === 200) {
          this.form = {
            title: data.title,
            type: data.card_id !== "ZA%3D%3D" ? "1" : "0",
            cover: data.cover,
            cycle: data.cycle === 1,
            videoSrc: data.video,
            card_id: data.card_id
          };
          this.vposter = this.$store.state.qiniu + data.cover;
          this.vsrc = this.$store.state.qiniu + data.video;
          this.DataArr = data.commodity_name;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.moblieBoxs {
  width: 378px;
  border: 1px solid #f5f5f5;
  height: 670px;
  background: #f5f5f5;
}
.icon {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  display: block;
  float: left;
  margin-right: 10px;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #fff;
  position: relative;
  img {
    width: 100px;
    height: 100px;
  }
}
</style>
